// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';


@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// July 2024 Mozilla Foundation fundraiser nav CTA experiment
html.is-firefox {
    .c-navigation {
        .c-navigation-shoulder {
            .c-fx-users {
                display: block;
            }

            .c-non-fx-users {
                display: none;
            }
        }
    }
}

.c-navigation {
    .c-navigation-shoulder {
        .c-fx-users {
            display: none;
        }

        .c-non-fx-users {
            display: block;
        }
    }
} // End of nav CTA experiment styles




header {
    .c-header-wrapper {
        text-align: center;

        h1 {
            @include font-size(32px);
        }

        p {
            @include font-size(18px);
            font-family: var(--title-font-family);
            margin: 0 auto;
            max-width: 780px;
            line-height: 1.4;
        }

        @media #{$mq-md} {
            h1 {
                @include font-size(54px);
            }

            p {
                @include font-size(30px);
            }
        }
    }
}

.c-homepage {
    h2 {
        text-align: center;

        @media #{$mq-xs} {
            @include font-size(32px);
        }

        @media #{$mq-md} {
            @include text-title-sm;
        }
    }
}

.c-quote {
    &.mitchell {
        background-image: linear-gradient(to right, #e8e7f2, #e5e9f5, #e2ebf7, #deedf8, #dbeff8, #daf0f7, #daf2f5, #daf3f3, #dcf4f1, #dff5ef, #e2f5ee, #e5f6ec);
    }

    &.politico {
        background-image: linear-gradient(to right top, #d8f2f6, #daf0f8, #ddeef8, #e0ecf8, #e4eaf6, #e3eaf6, #e1ebf7, #e0ebf7, #daeef7, #d5f1f4, #d6f3ee, #dbf4e5);
    }

    .c-quote-wrapper {
        &.mzp-l-content{
            padding-top: $layout-md;
            padding-bottom: $layout-md;
        }

        blockquote,
        cite {
            font-family: var(--body-font-family);
            text-align: center;
        }

        blockquote {
            @include font-size(20px);
            border: 0;
            line-height: 130%;
            margin-top: 0;
            font-weight: normal;

            p {
                margin-bottom: $spacing-sm;
            }
        }

        cite {
            @include font-size(18px);
            font-weight: bold;
            font-style: normal ;

            &::before {
                content: none;
            }
        }
    }
}

.c-products {
    text-align: center;

    ul {
        margin-top: $layout-lg;

        .mzp-c-picto {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            margin-bottom: $layout-lg;

            &:last-child {
                margin-bottom: 0;
            }

            .mzp-c-picto-image {
                margin-bottom: $spacing-md;
            }

        }

        &.c-product-columns {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column wrap;
            column-gap: $v-grid-sm;

            .mzp-c-picto {
                height: 200px;
                width: 275px;
                margin: 0 0 $layout-lg;
            }


            @media #{$mq-md} {
                align-items: flex-start;
                flex-direction: row;
            }
        }
    }

    h3 {
        @include text-body-md;
        font-family: var(--body-font-family);
        font-weight: 600;
        line-height: 1.2;
    }

    @media #{$mq-md} {
        ul {
            .mzp-c-picto {
                margin-bottom: 0;
            }
        }
    }
}

.c-mission,
.c-about,
.mzp-c-newsletter {
    p {
        @include text-body-lg;
    }
}

.c-mission {
    .c-trustworthy-ai {
        padding-bottom: 0;
    }

    @media #{$mq-md} {
        .mzp-c-split-container {
            padding: 0 80px;
        }

        h2 {
            @include bidi(((text-align, left, right),));
        }
    }

    .c-volunteer {
        padding-top: 0;
    }
}

.c-about {
    background-color: $color-light-gray-20;

    .c-about-wrapper {
        padding-bottom: $layout-xl;
        position: relative;

        h2 {
            @include bidi(((text-align, left, right),));
        }
    }

    .c-about-cta {
        text-align: center;
    }

    .c-dino {
        width: 100px;
        height: auto;
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        margin: auto;

        img {
            width: 115px;
            height: 95px;
            object-fit: scale-down;
            object-position: 4px 16px;
        }
    }

    @media #{$mq-md} {
        .c-about-wrapper {
            h2 {
                text-align: center;
            }
        }
    }
}

.c-newsletter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .c-newsletter-info {
        align-self: flex-start;
        text-align: center;
        margin-bottom: $layout-sm;
    }

    .c-newsletter-content {
        header {
            display: none;
        }
    }

    @media #{$mq-md} {
        flex-direction: row;

        .c-newsletter-info {
            width: 45%;
            @include bidi(((text-align, left, right),));
            margin-bottom: 0;

            h2 {
                @include bidi(((text-align, left, right),));
            }
        }

        .c-newsletter-content {
            width: 50%;
            @include bidi(((margin-left, $layout-lg, margin-right, 0),));
        }
    }
}
